<script setup lang="ts" name="/page2">
import { ref  } from "vue";
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

let dialogVisible = ref<boolean>(false);

let u:Array<user> = JSON.parse(localStorage.getItem('user')!)

let userListAll = ref(u)
let adminList = ref(JSON.parse(localStorage.getItem('adminList')!))
let userList = ref(JSON.parse(localStorage.getItem('userList')!))
// 当前卡片
let currentCard = ref('');

// 枚举 使用对象
enum ruleObject {
    admin,
    user,
    null
}

interface user {
    id:Number,
    user:String,
    pwd:String,
    // 是否被使用
    disabled:boolean,
    // 是否被勾选
    checked:boolean,

}
// 获取admin卡片内容,并且将不在admin标记
let cardAdminList = ref();


const getAdminCard =() => {
    userListAll.value = JSON.parse(localStorage.getItem('user')!)
    adminList.value = JSON.parse(localStorage.getItem('adminList')!)
    userList.value = JSON.parse(localStorage.getItem('userList')!)
    userListAll.value = userListAll.value.map(item =>{
        return {
            ...item,
            checked: false,
        }
    })
    cardAdminList.value = [];
    userListAll.value.map(item =>{
        adminList.value.forEach((id: { toString: (radix?: number | undefined) => string; toFixed: (fractionDigits?: number | undefined) => string; toExponential: (fractionDigits?: number | undefined) => string; toPrecision: (precision?: number | undefined) => string; valueOf: () => number; toLocaleString: { (locales?: string | string[] | undefined, options?: Intl.NumberFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions | undefined): string; }; }) =>{
            if(item.id == id){
                cardAdminList.value.push(item);
                item.disabled = true;
            }
        })
    })
}

// 获取user卡片内容,并且将不在admin标记
let cardUserList= ref();
let getUserCard = () => {
    cardUserList.value = []
    userListAll.value.map(item =>{
        userList.value.forEach((id: { toString: (radix?: number | undefined) => string; toFixed: (fractionDigits?: number | undefined) => string; toExponential: (fractionDigits?: number | undefined) => string; toPrecision: (precision?: number | undefined) => string; valueOf: () => number; toLocaleString: { (locales?: string | string[] | undefined, options?: Intl.NumberFormatOptions | undefined): string; (locales?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions | undefined): string; }; }) =>{
            if(item.id == id){
                cardUserList.value.push(item);
                item.disabled = true;
            }
        })
    })
}
//  返回显示文案
const getTxt = (item:user) : String =>{
    return item.user
}

const submit = () :void =>{
    let newArr:Array<Number> = [];
        
    userListAll.value.forEach(item=>{
        if(item.checked && item.checked == true){
            newArr.push(item.id)
        }
    })
    if(currentCard.value == 'admin'){
        localStorage.setItem('adminList',JSON.stringify(adminList.value.concat(newArr)))
        // 标记已选择,俩都要请求
        getAdminCard()
        getUserCard()
        ElMessage({
            message: '添加',
            type: 'success',
        })
        dialogVisible.value = false;
    }else{
        localStorage.setItem('userList',JSON.stringify(userList.value.concat(newArr)))
        getAdminCard()
        getUserCard()
        ElMessage({
            message: '添加',
            type: 'success',
        })
        dialogVisible.value = false;
    }
}

const handleAdd = (name:string) =>{
    dialogVisible.value = true;
    currentCard.value = name;
}
// 
const main = () => {
    getAdminCard()
    getUserCard()
}

main();
</script>

<template>
    <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>admin</span>
        <el-button type="primary" :icon="Plus" @click="handleAdd('admin')">{{ $t('defaultFont.addAccount') }}</el-button>
      </div>
    </template>
    <div v-for="(item, index) in cardAdminList" :key="index">
        {{ item.user }}
    </div>
  </el-card>

  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>user</span>
        <el-button type="primary" :icon="Plus" @click="handleAdd('user')">{{ $t('defaultFont.addAccount') }}</el-button>
      </div>
    </template>
    <div v-for="(item, index) in cardUserList" :key="index">
        {{ item.user }}
    </div>
  </el-card>

  <!-- 添加账号弹出框 -->
  <el-dialog
    v-model="dialogVisible"
    :title="$t('defaultFont.addAccount')"
    width="30%"
  >
    <template v-for="(item,index) in userListAll" :key="item.id">
        <div>
            <el-checkbox v-model="item.checked"
                :disabled="item.disabled" :label="getTxt(item)" size="large" />
        </div>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('defaultFont.cancel') }}</el-button>
        <el-button type="primary" @click="submit">{{ $t('defaultFont.ok') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.card-header{
    display: flex;
    justify-content: space-between;
}
</style>
